<template>
  <div>
    <div v-if="datailToggleList" v-for="(item,index) in datailToggleList" class="idatailToggleList">

      <!--{{item.value}} {{item.datailToggle}}-->
      <Modal
        v-model="item.datailToggle" :value="item.ivalue" draggable footer-hide :width="number" :class-name="className"  class="idatailToggleList" :class="'idatailToggleList'+index">
        <div slot="header" class="ivu-modal-headerPadding iview-modal-theme">
          <span>{{item.name}}</span>
          <Icon :type="item.dropToggleState== true ? 'md-arrow-dropdown' : 'md-arrow-dropup'" @click="dropToggle(item)"></Icon>
        </div>
        <div class="ivu-modal-bodyPadding" v-if="item.dropToggleState">
            <!--<slot></slot>-->
          <LayerFilter :LayerData="layerData"></LayerFilter>
        </div>
      </Modal>
    </div>
  </div>


</template>

<script>
  import LayerFilter from '../components/LayerFilter'
  export default {
    components: {
      LayerFilter,
    },
    data() {
      return {
        name: "modleState",
        searchModal: false,
        datailToggle: false,
        dropToggleState: true,
        layerData: {name: "jjj"},
      }
    },
    props: {
      title: {
        type: String,
        default: "标题"
      },
      number: {
        type: String,
        default: 500
      },
      topNum: {
        type: String,
        default: ""
      },
      className: {
        type: String,
        default: ""
      },
      datailToggleList: {
        type: Array,
        default: []
      }
    },
    methods: {
      dropToggle: function (item) {
        var m = this;
       // debugger
        //this.dropToggleState = !this.dropToggleState;
        //m.dropToggleState = !m.dropToggleState;
        item.dropToggleState = !item.dropToggleState;
      },
      searchFunction: function () {
        this.searchModal = !this.searchModal;

      },
      datailFunction: function () {
        //var m =this;
        this.datailToggle = !this.datailToggle;
        //m.datailContent = !m.datailContent;
      }
    }
  }
</script>

<style scoped>

</style>
